<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>介绍</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
</head>
<body class="isHide">
<div class="ft-wrap ft-view height intro-bto">
    <div class="ft-overflow-hide height">
        <div class="ft-overflow">
            <div class="introduce-box">
                <div class="intro-logo-box">
                    <label class="intro-bg"><img src="../img/intro-bg.jpg"></label>
                    <div class="intro-box">
                        <div class="box-table">
                            <div class="cell">
                                <div class="intro-cont">
                                    <label class="intro-logo"><img src="../img/big-logo.png"></label>
                                    <label class="intro-text">A Professional Supplier of e-Store Technology
                                        Services </label>
                                    <span>Mall template download</span>
                                    <a href="javascript:;"><i class="ft-sprite icon-IPhone"></i>IPhone</a>
                                    <a href="javascript:;"><i class="ft-sprite icon-Android"></i>Android</a>
                                    <a href="javascript:;"><i class="ft-sprite icon-Google"></i>Google Play</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="intro-menu-box">
                    <div class="box-list">
                        <ul class="row-2">
                            <li>
                                <a href="javascript:;">
                                    <img src="../img/intro-m1.png">
                                    <span>Website Building</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../img/intro-m2.png">
                                    <span>App Site Building</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../img/intro-m3.png">
                                    <span>7*24 Customer Service</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../img/intro-m4.png">
                                    <span>Free Product Database </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="intro-detail-box">
                    <div class="intro-detail-cont">
                        <h2>Detailed information</h2>
                        <div class="intro-banner">
                            <div class="swiper-container" id="detailsBanner">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" data-swiper-slide-index=0>
                                        <img class="swiper-lazy" data-src="../img/intro-img1.png"
                                             src="../img/shop-banner-def.jpg">
                                    </div>
                                    <div class="swiper-slide" data-swiper-slide-index=1>
                                        <img class="swiper-lazy" data-src="../img/intro-img2.png"
                                             src="../img/shop-banner-def.jpg">
                                    </div>
                                    <div class="swiper-slide" data-swiper-slide-index=2>
                                        <img class="swiper-lazy" data-src="../img/intro-img3.png"
                                             src="../img/shop-banner-def.jpg">
                                    </div>
                                    <div class="swiper-slide" data-swiper-slide-index=3>
                                        <img class="swiper-lazy" data-src="../img/intro-img4.png"
                                             src="../img/shop-banner-def.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="intro-detail-box">
                    <div class="intro-detail-cont">
                        <h2>About us</h2>
                        <p>Onskysell is a professional technical services site, we have a strong IT team to do technical
                            support, and the excellent customer service to ensure our sales. </p>
                        <p>We also provide free product data,Agent-Delivery and Agent-Product to promote your
                            business. </p>
                        <p>You sell, you do E-store on Onskysell.</p>
                        <p>Welcome to visit: <a href="#">www.onskysell.com</a></p>
                        <div class="intro-method" style="display: none;">
                            <span class="title">如何建站</span>
                            <label><i>1</i><span>Purchase Site Service</span></label>
                            <label><i>2</i><span>Program Development</span></label>
                            <label><i>3</i><span>Testing and Adjusting</span></label>
                            <label><i>4</i><span>Server Deployment</span></label>
                            <label><i>5</i><span>Operation Online</span></label>
                        </div>
                        <a class="intro-btn active" href="javascript:;"><img src="../img/intro-btn.png"></a>
                    </div>
                </div>
                <div class="intro-detail-box">
                    <div class="intro-detail-cont">
                        <h2>Information</h2>
                        <div class="intro-list">
                            <label>
                                <em>Category:</em>
                                <span>business</span>
                            </label>
                            <label>
                                <em>Update:</em>
                                <span>2017-03-27</span>
                            </label>
                            <label>
                                <em>Edition:</em>
                                <span>1.0.0</span>
                            </label>
                            <label>
                                <em>Size:</em>
                                <span>16.8MB</span>
                            </label>
                            <label>
                                <em>Age limit:</em>
                                <span>4+</span>
                            </label>
                            <label>
                                <em>Compatibility:</em>
                                <span>Android 4.0 & ios 7.0 or upgraded version is required. Compatible with iphone, ipad and ipod touch.</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="intro-copyright">©Copyright Onskysell 2016. All rights reserved</div>
            </div>
        </div>
    </div>
    <a class="intro-bottom" href="javascript:;">Contact us</a>
</div>

<div class="ft-pop-disk intro-disk">
    <img src="../img/disk-bg.png">
</div>

<!--显示产品大图-->
<div class="ft-pop-disk product-big animated-left">
    <div class="ft-pop-box">
        <div class="ft-disk-hd">
            <span class="ft-disk-title" id="productLength"><i>12</i> of <i>12</i></span>
            <a class="ft-close-btn"><i class="ft-sprite"></i></a>
        </div>
        <div class="ft-disk-bd">
            <div class="product-big-list">
                <div class="swiper-container" id="productBig">
                    <div class="swiper-wrapper"></div>
                    <div class='swiper-loading'></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/swiper.jquery.min.js"></script>
<script src="../js/box.js"></script>
<script src="../js/ft-common.js"></script>
<script src="../js/pageScript.js"></script>
<script>
    $(function () {
        var _bannerBox = publicFuns.newSwiper("#detailsBanner", 2);

        //显示产品大图
        $(document).on("click", "#detailsBanner", function (e) {
            var that = this;
            e.stopPropagation();
            showBigImg({
                imgNumber: 4,
                swiperEle: _bannerBox,
                clickEle: that,
                animateEle: ".product-big"
            })
        });

        $(".intro-btn").click(function () {
            $(this).toggleClass("active");
            $(".intro-method").slideToggle();
        });

        $(".intro-disk").click(function () {
            $(this).fadeOut();
        });

        $(".intro-bottom").click(function () {
            $.jConfirm("Contact us", [
                {
                    text: "E-mail: TinaXu@onskysell.com",
                    src: "javascript:;",
                    css: {color: "#666666"},
                    closeOpt: {type: 3},
                    callback: function () {
                        //console.log(0);
                    }
                },
                {
                    text: "Tel: +86 15123206263",
                    src: "tel:15123206263",
                    css: {color: "#666666"},
                    callback: function () {
                        //console.log(1);
                    }
                },
                {
                    text: "Skype: TinaXu@onskysell.com",
                    src: "email:TinaXu@onskysell.com",
                    css: {color: "#666666"},
                    callback: function () {
                        //console.log(1);
                    }
                },
                {
                    text: "Cancel",
                    src: "javascript:;",
                    callback: function () {
                        //console.log(1);
                    }
                }
            ], "V", null, {
                width: 260,
                tipsCss: {
                    "font-size": "1.8rem"
                }
            });
        });
    })
</script>
</body>
</html>